<template>
  <div class="book-comment">
    <div class="title">发表新的评论</div>
    <div class="publish" v-if="isLogin">
      <img
        src="https://file.ituring.com.cn/SmallAvatar/"
        alt=""
        class="mine-img"
      />
      <input type="text" placeholder="说点什么..." class="content-input" />
      <button class="send-btn">发送</button>
    </div>
    <div class="publish-noLogin" v-else>
      <span>请先</span>
      <router-link class="toLogin" :to="{ name: 'Login' }">登录</router-link>
      <span>后发表评论</span>
    </div>
    <div class="tab-view">
      <div class="count-text">共有{{ detailComments.commentCount }}条评论</div>
      <div class="tab-box">
        <span class="tab-select">热门</span>
        <div class="line"></div>
        <span>最新</span>
      </div>
    </div>
    <div class="comments-list">
      <Comment
        v-for="(item, index) in detailComments.comments"
        :key="index"
        :comment="item"
      ></Comment>
    </div>
  </div>
</template>

<script>
import Comment from './Comment'

export default {
  name: 'BookComment',
  components: {
    Comment
  },
  props: {
    detailComments: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isLogin: false
    }
  }
}
</script>

<style scoped>
/* 发送评论区域 */
.book-comment .title {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  height: 22px;
  color: #152844;
  margin: 24px 0 12px;
}
.publish {
  display: flex;
  align-items: center;
}
.publish .mine-img {
  flex: 0 0 40px;
  margin-right: 12px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.publish .content-input {
  flex: 1;
  background: #f6f9fb;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
  color: #484848;
  padding: 5px 12px;
  white-space: nowrap;
}
.publish-noLogin {
  color: #5f77a6;
  font-size: 14px;
  background: #f6f9fb;
  border-radius: 4px;
  text-align: center;
  height: 64px;
  line-height: 64px;
}
.publish-noLogin a {
  color: #4684e2;
  cursor: pointer;
  margin: 0 5px;
}

.send-btn {
  margin-left: 10px;
  background: #4684e2;
  border-radius: 4px;
  flex: 0 0 80px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  height: 32px;
  line-height: 32px;
  outline: none;
}
/* tap 切换热门最新区域 */
.tab-view {
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
}
.tab-view .count-text {
  color: #484848;
}
.tab-view .tab-box {
  display: flex;
  align-items: center;
}
.tab-view .tab-box span.tab-select {
  color: #152844;
}
.tab-view .tab-box span {
  color: #5f77a6;
  cursor: pointer;
}

.tab-box .line {
  width: 1px;
  height: 12px;
  margin: 0 12px;
  background: #cedce4;
}
</style>
